<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>修改员工</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../lib/layui/css/layui.css">
		<link rel="stylesheet" href="../css/scroll-bar.css">
		<link rel="stylesheet" href="../css/sub-page.css">
		<link rel="stylesheet" href="//at.alicdn.com/t/font_693759_wytlyqhtdtj1nhfr.css">
	</head>

	<body>
		<div class="ok-body">
			<!--面包屑导航区域-->
			<div class="ok-body-breadcrumb">
				<span class="layui-breadcrumb">
                <a><cite>主页</cite></a>
                <a><cite>账号管理</cite></a>
                <a><cite>账号管理页</cite></a>
            </span>
				<a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
					<i class="layui-icon layui-icon-refresh"></i>
				</a>
			</div>
			<!--form表单-->
			<form class="layui-form ok-form">
				<div class="layui-form-item">
					<label class="layui-form-label" >新密码</label>
					<div class="layui-input-block">
						<input type="password" id="pwd1" name="password" placeholder="请输入新密码" autocomplete="off" class="layui-input" lay-verify="required" onchange="test()">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">确认密码</label>
					<div class="layui-input-block">
						<input type="password"  id="pwd2" name="unpassword" placeholder="请再次输入新密码" autocomplete="off" class="layui-input" lay-verify="required" onchange="test1()" >
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<input class="layui-btn" lay-submit lay-filter="edit" value="立即提交">
						<input type="reset" class="layui-btn layui-btn-primary" value="重置">
					</div>
				</div>
			</form>
		</div>
		<!--js逻辑-->
		<script src="lib/layui/layui.js"></script>
		<script>
			function test() {
				var x = document.getElementById("pwd1").value;
				//x就是密码的字符串，用到正则，在这里对字符串匹配就行，一样的返回true 或false
				if(x.length < 6) {
					alert("密码不能少于六位数！");
					return false;
				}
				return true;
			}
			function test1() {
				var x = document.getElementById("pwd1").value;
				var y = document.getElementById("pwd2").value;
				if(y != x) {
					alert("两次密码不一致！");
					return false
				}
				return true
			}
			function test2() {
				var a = document.getElementById("name").value;
				if(a != "" && a != null) {
					return true;
				}
				return false;
			}
			
			layui.use(['element', 'form', 'jquery', 'laydate', 'authtree'], function() {
				var element = layui.element;
				var table = layui.table;
				var form = layui.form;
				var $ = layui.jquery;
				var laydate = layui.laydate;
				var authtree = layui.authtree;

				$.ajax({
					url: 'data/tree.json',
					dataType: 'json',
					success: function(data) {
						// 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
						authtree.render('#authTree', data.data.trees, {
							inputname: 'authids[]',
							layfilter: 'lay-check-auth',
							openall: false
						});
					}
				})

				laydate.render({
					elem: '#birthday',
					type: "datetime"
				});

				// 监听自定义lay-filter选中状态，PS:layui现在不支持多次监听，所以扩展里边只能改变触发逻辑，然后引起了事件冒泡延迟的BUG，要是谁有好的建议可以反馈我
				form.on('checkbox(lay-check-auth)', function(data) {
					console.log(data.field);
					// 获取所有节点
					var all = authtree.getAll('#authTree');
					console.log('all', all);
					// 获取所有已选中节点
					var checked = authtree.getChecked('#authTree');
					console.log('checked', checked);
					// 获取所有未选中节点
					var notchecked = authtree.getNotChecked('#authTree');
					console.log('notchecked', notchecked);
					// 注意这里：需要等待事件冒泡完成，不然获取叶子节点不准确。
					setTimeout(function() {
						// 获取选中的叶子节点
						var leaf = authtree.getLeaf('#authTree');
						console.log(leaf);
					}, 100);
					return false;
				});

				form.on('submit(edit)', function(data) {
					test1();
					console.log(data.field);
					layer.msg("编辑成功！", {
						icon: 6,
						time: 1000,
						anim: 4
					}, function() {
						parent.layer.close(parent.layer.getFrameIndex(window.name));
					});
					return false;
				});
			})
		</script>
	</body>

</html>